<template>
  <view>
    <u-popup :show="showFlag" @close="close" @open="open" mode="center" round="20" :safeAreaInsetBottom="false">
      <view class="popup">
        <view class="popup-title">
          {{ title }}
        </view>
        <view class="popup-center" v-if="text !== '1'">
          {{ text }}
        </view>
        <slot name="selectTimeSlot"></slot>
        <view class="popup-btnBox">
          <view class="btn" style="color: #000; background: #f8f9fe" @click="close" v-if="isBtn2">{{ btn2Text }}</view>
          <view class="btn" @click="btnClick">{{ btnText }}</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    // 显示弹出层
    showFlag: {
      default: false,
      type: Boolean
    },
    title: {
      type: String,
      default: '提示',
      require: false
    },
    text: {
      type: String,
      default: '是否确定该操作?',
      require: false
    },
    btnText: {
      type: String,
      default: '确定',
      require: false
    },
    btn2Text: {
      type: String,
      default: '取消',
      require: false
    },
    isBtn2: {
      type: Boolean,
      default: true
    }
  },
  name: 'MessageBox',
  data() {
    return {}
  },
  methods: {
    // 弹出层打开
    open() {
      // console.log('open');
    },
    // 弹出层关闭
    close() {
      this.$emit('popupClose')
    },
    // 按钮点击
    btnClick() {
      this.$emit('MesBoxCallback')
    }
  }
}
</script>

<style lang="scss" scoped>
.popup {
  width: 600rpx;
  box-sizing: border-box;
  padding: 32rpx 0 48rpx;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  &-title {
    width: 100%;
    text-align: center;
    height: 48rpx;
    opacity: 1;
    color: rgba(0, 0, 0, 0.8);
    font-size: 32rpx;
    font-weight: 500;
    font-family: 'PingFang SC';
    text-align: center;
    line-height: 44rpx;
    letter-spacing: 0.6rpx;
  }

  &-center {
    margin-top: 35rpx;
    width: 60%;
    color: rgba(0, 0, 0, 0.4);
    font-size: 28rpx;
    font-weight: 400;
    font-family: 'PingFang SC';
    text-align: center;
    line-height: 40rpx;
    letter-spacing: 0.6rpx;
  }

  &-btnBox {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 64rpx;

    .btn {
      width: 250rpx;
      height: 88rpx;
      border-radius: 44rpx;
      background: rgba(128, 110, 254, 1);
      color: rgba(255, 255, 255, 1);
      font-size: 32rpx;
      font-weight: 500;
      text-align: center;
      line-height: 88rpx;
      letter-spacing: 0.6rpx;
    }
  }
}
</style>
